<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/music.css">
</head>
<body>
<!--播放器开始-->
<div class="musicPlayer">
    <!--歌曲信息-->
    <div class="musicInfo">
        <!--歌曲封面-->
        <div  class="musicImg">
            <img src="images/g1.jpg" id="musicPic" alt="">
        </div>
        <!--歌曲封面end-->
        <!--文字信息-->
        <div class="musicText">
            <h1 id="sName">歌曲名称</h1>
            <h2 id="geshou">歌手</h2>
        </div>
        <!--文字信息end-->
    </div>
    <!--歌曲信息end-->
    <!--进度-->
    <div class="jd">
        <span class="cTime time" id="cTime">00:00</span>  <!-- 当前时间 -->
        <span class="tTime time" id="tTime">00:00</span>  <!-- 总的时间 -->
        <div class="clears"></div>
        <!--进度条-->
        <div class="jdt" id="gequJDBar">
            <div class="jdtColor" id="gequJD"></div>
        </div>
        <!--进度条end-->
    </div>
    <!--进度 end-->
    <!--按钮-->
    <div class="ctrls">
            <button class="nextPrev" type="button"id="prevBtn">上一首</button>
            <button class="playBtn"  type="button" id="playBtn">开始</button>
            <button class="nextPrev" type="button"id="nextBtn">下一首</button>
            <!--音量-->
            <div class="vol">
                <div class="volJd"id="vol">
                    <div class="volJdColor" id="volJdColor"></div>
                    <div class="volBlock" id="volBlock"></div>
                </div>


            </div>

            <!--音量end-->
    </div>
    <!--按钮 end-->
    <audio src="#" id="music"></audio>

</div>
<!--播放器end-->
<script src="js/musicplayer.js"></script>

</body>
</html>